 <#assign module="chart"/>

<@override name="header">
<link rel="stylesheet" href="${ctx}/assets/css/datepicker/datepicker.css">
</@override>
<@override name="body">

  
  <div class="row">
     <div class="col-md-2">
	        <ul class="list-group">
	        	<#--
	        	<li class="list-group-item"><a  href="${ctx}/chart/heatMap">热力图</a></li>
	        	-->
	        	<@daijia>
		        <li class="list-group-item"><a  href="${ctx}/chart/compositive">代驾订单汇总</a></li>
		        </@daijia>
				<@pao>
				<li class="list-group-item"><a  href="${ctx}/chart/paotuiCompositive">跑腿订单汇总</a></li>
				</@pao>
				<@zhuan>
				<li class="list-group-item"><a  href="${ctx}/chart/zhuanCompositive">专车订单汇总</a></li>
				</@zhuan>
				<@freight>
				<li class="list-group-item"><a  href="${ctx}/chart/freightCompositive">货运订单汇总</a></li>
				</@freight>
				<@zhuanxian>
				<li class="list-group-item"><a  href="${ctx}/chart/zhuanxianCompositive">快车订单汇总</a></li>
				</@zhuanxian>
		        <li class="list-group-item"><a  href="${ctx}/chart/orderYearChart">订单统计</a></li>
			    <li class="list-group-item"><a  href="${ctx}/chart/orderType">订单来源统计</a></li>
			    <li class="list-group-item"><a  href="${ctx}/chart/memberOrder1">客户消费统计</a></li>
				<li class="list-group-item"><a  href="${ctx}/chart/tableNewMemberMonth">新增客户统计</a></li>
			    <li class="list-group-item"><a  href="${ctx}/chart/driverOrder">服务人员业绩</a></li>
			    <li class="list-group-item"><a  href="${ctx}/chart/introduce">推荐员工业绩</a></li>
			    <li class="list-group-item"><a  href="${ctx}/chart/infoFee">保险费/信息费</a></li>
			    <@shiro.isMainCompany>
			    <li class="list-group-item"><a  href="${ctx}/chart/companyOrder">公司统计</a></li>
			    </@shiro.isMainCompany>
			    <!-- <li class="list-group-item"><a  href="${ctx}/chart/activity">活动统计</a></li> -->
			    <li class="list-group-item"><a  href="${ctx}/chart/driverTime">服务人员在线时间统计</a></li>
		    </ul>
	  </div>
	  
       	   
    
    <div class="col-md-10">
	  <div role="tabpanel">
	  	<div class="row">
	  		<div class="col-xs-10">
	  			<form class="form-inline" id="SearchForm" method="get">
	  				<@shiro.isMainCompany>
						<select class="form-control" name="companyId" id="companyId">
							<option value="">全部</option>
								<#list companys as company>
								<option value="${company.id}" <#if companyId?? && companyId==company.id>selected="selected"</#if>>${company.abbreviation}</option>
								</#list>
						</select>
					</@shiro.isMainCompany>
					
					<div class="form-group">
						<div class="btn-group">
							<button id="dateRangeButton" type="button" class="btn btn-default dropdown-toggle">
								<span id="dateRangeText">选择时间</span> <span class="caret"></span>
							</button>
							<div class="dropdown-calendar">
								<div class="panel panel-default" style="margin-bottom:0px;">
									<div class="panel-heading">
									时间范围 ：<input type="text" id="startTime" name="startTime" /> 至 <input type="text" id="endTime" name="endTime" />
									<button type="button" id="applyIt" class="pull-right">应用</button>
									</div>
									<div id="dateRangeCalendar"></div>
								</div>
							</div>
						</div>
					</div>
					
				</form>
	  		</div>
	  	</div>
	  </div>
	  
	  
	  <#assign amount=0/>
	     <#assign money=0/>
            <#list page.content as type>
               <#assign amount=amount+type.amount />
               <#assign money=money+type.money />
            </#list>
	     
	   <div class="row">
	      <#list page.content as type>
             <div class="col-md-4">
	           <div class="panel panel-default" style="width:338px;height:150px;margin-top:23PX">
                  <div class="media">
                    <a class="media-left" style="float:left;">
                      <#if type.type=="个人用户">
                      	<img src="${ctx}/assets/img/人工.png" style="float:left;width:70px;height:70px;margin-left:50PX;margin-top:30px">
                      <#elseif type.type=="企业用户">
                      	<img src="${ctx}/assets/img/司机补单.png" style="float:left;width:70px;height:70px;margin-left:50PX;margin-top:30PX">
                      </#if>
                    </a>
                      <div class="media-right" style="float:left;margin-top:28PX;margin-left:20PX">
                         <h4 class="media-heading">
                         	<#if type.type=="个人用户">
                         		个人用户
                         	<#elseif type.type=="企业用户">
                         		企业用户
                         	</#if>
                         </h4>
                       
                         <h5 class="media-heading" style="margin-top:10PX;">单量:${type.amount}</h5>
                         <h5 class="media-heading" style="margin-top:10PX;color:#FF0000;">金额:${type.money}</h5>
                   
                     </div>
                  </div>
               	  <div class="media-right">
                   <#if type.type=="个人用户">
                   		<#if amount!=0>
                   			<h5 class="media-heading" style="margin-left:50px;margin-top:10PX;float:left;">单量:${((type.amount/amount)*100)?string("0.#")}%</h5>
                   			<h5 class="media-heading" style="margin-left:30px;margin-top:10PX;float:left;color:#FF0000;">金额:${((type.money/money)*100)?string("0.#")}%</h5>
                   		<#else>
                   			<h5 class="media-heading" style="margin-left:50px;margin-top:10PX;float:left;">单量(%):0</h5>
                   			<h5 class="media-heading" style="margin-left:30px;margin-top:10PX;float:left;color:#FF0000;">金额:(%):0</h5>
                   		</#if>
                   <#elseif type.type=="企业用户">
                    	<#if amount!=0>
                   			<h5 class="media-heading" style="margin-left:50px;margin-top:10PX;float:left;">单量:${((type.amount/amount)*100)?string("0.#")}%</h5>
                   			<h5 class="media-heading" style="margin-left:30px;margin-top:10PX;float:left;color:#FF0000;">金额:${((type.money/money)*100)?string("0.#")}%</h5>
                   		<#else>
                   			<h5 class="media-heading" style="margin-left:50px;margin-top:10PX;float:left;">单量(%):0</h5>
                   			<h5 class="media-heading" style="margin-left:30px;margin-top:10PX;float:left;color:#FF0000;">金额:(%):0</h5>
                   		</#if>
                   </#if>
                  </div>    
              </div>
            </div>    
	   </#list> 
	 
	     
   </div>
  </div>         
</div>


</@override>


<@override name="footer">
<script>
	window.daijia = {ctx:'${ctx}',start:'${start?string("yyyy-MM-dd")}',end:'${end?string("yyyy-MM-dd")}'};
</script>
<script src="${ctx}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/assets/js/datepicker.js"></script>
<script src="${ctx}/assets/js/jquery.paging.min.js"></script>
<script src="${ctx}/assets/js/chart/userType.js"></script>


</@override>
<@extends name="../layout.ftl"/>
